<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>select2ztree</title>
<link rel="stylesheet" href="./bootstrapZtree/bootstrapStyle.css"
	type="text/css" />
<link rel="stylesheet" href="./select2/css/select2.min.css"
	type="text/css" />
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript"
	src="./jquery-ztree/js/jquery.ztree.all.js"></script>
<script type="text/javascript"
	src="./jquery-ztree/js/jquery.ztree.exhide.min.js"></script>
<script type="text/javascript"
	src="./jquery-ztree/js/jquery.ztree.fuzzysearch.js"></script>
<script type="text/javascript" src="./select2/js/select2.js"></script>
<script type="text/javascript" src="./select2/ext/select2-ztree.js"></script>
</head>
<body>
	<div>
		<div>
			多选树形下拉框<br>
			<select name="multiS2ZTree" style="width: 400px;"
				multiple="true"></select>
			<button onclick="showSelected('multiS2ZTree')">展示结果</button>
		</div>
		<textarea name="multiS2ZTree" style="width: 400px; height: 50px;"></textarea>
	</div>
	<div>
		<div>
			多选树形下拉框-ajax<br>
			<select name="multiS2ZTreeAjax" style="width: 400px;"
				multiple="true"></select>
			<button onclick="showSelected('multiS2ZTreeAjax')">展示结果</button>
		</div>
		<textarea name="multiS2ZTreeAjax" style="width: 400px; height: 50px;"></textarea>
	</div>
	<div>
		<div>
			单选树形下拉框1<br>
			<select name="radio2" style="width: 400px;"></select>
			<button onclick="showSelected('radio2')">展示结果</button>
		</div>
		<textarea name="radio2" style="width: 400px; height: 50px;"></textarea>
	</div>
	<div>
		<div>
			单选树形下拉框2<br>
			<select name="radio3" style="width: 400px;"></select>
			<button onclick="showSelected('radio3')">展示结果</button>
		</div>
		<textarea name="radio3" style="width: 400px; height: 50px;"></textarea>
	</div>
	<button id="btn_destroy" data-destroy='1'>销毁单选树形下拉框2</button>
	<div></div>
	<script type="text/javascript">
		var setting = {
			view : {
				dblClickExpand : false
			},
			data : {
				simpleData : {
					enable : true
				}
			}
		};

		var zNodes = [ {
			id : 100,
			pId : 0,
			name : "北京"
		}, {
			id : 101,
			pId : 0,
			name : "天津"
		}, {
			id : 102,
			pId : 0,
			name : "上海"
		}, {
			id : 103,
			pId : 0,
			name : "重庆"
		}, {
			id : 4,
			pId : 0,
			name : "河北省",
			open : true
		}, {
			id : 41,
			pId : 4,
			name : "石家庄"
		}, {
			id : 42,
			pId : 4,
			name : "保定"
		}, {
			id : 43,
			pId : 4,
			name : "邯郸"
		}, {
			id : 44,
			pId : 4,
			name : "承德"
		}, {
			id : 5,
			pId : 0,
			name : "广东省",
			open : true
		}, {
			id : 51,
			pId : 5,
			name : "广州"
		}, {
			id : 52,
			pId : 5,
			name : "深圳"
		}, {
			id : 53,
			pId : 5,
			name : "东莞"
		}, {
			id : 54,
			pId : 5,
			name : "佛山"
		}, {
			id : 6,
			pId : 0,
			name : "福建省",
			open : true
		}, {
			id : 61,
			pId : 6,
			name : "福州"
		}, {
			id : 62,
			pId : 6,
			name : "厦门"
		}, {
			id : 63,
			pId : 6,
			name : "泉州"
		}, {
			id : 64,
			pId : 6,
			name : "三明"
		} ];
		var treeIdCounter = 0;
		//初始化树形下拉框
		var multiS2ZTree = $('select[name=multiS2ZTree]').select2ztree({
			textField : 'name',
			titleField : 'name',
            multipleSearch: true, // 开启多选搜索框
			ztree : {
				setting : $.extend(true, {
					//必传，统一页面唯一，该参数保证同一页面存在多个select2ztree时，不会彼此影响
					treeId : ++treeIdCounter
				}, setting, {
					check : {chkboxType:{"Y":"ps","N":"ps"}}
				}),
				zNodes : zNodes
			}
		});
		//注意，select2的赋值方式与jquery常规的val赋值不一样，必须使用下面的方式

		//使用方法选中的值
		multiS2ZTree.select2ztree('val', [ '100', '101' ]);
		
		// ajax异步获取数据
		var multiS2ZTreeAjax = $('select[name=multiS2ZTreeAjax]').select2ztree({
			textField : 'name',
			titleField : 'name',
			ztree : {
				setting : $.extend(true, {
					//必传，统一页面唯一，该参数保证同一页面存在多个select2ztree时，不会彼此影响
					treeId : ++treeIdCounter
				}, setting, {
					async: {
						enable: true,
						url: "./ztree_data.json",
						type: "get"
					}
				})
			}
		});

		var s2z2 = $('select[name=radio2]').select2ztree({
			textField : 'name',
			titleField : 'name',
			ztree : {
				setting : $.extend(true, {
					treeId : ++treeIdCounter
				}, setting),
				zNodes : [ {
					id : 1,
					pId : 0,
					name : "北京"
				}, {
					id : 2,
					pId : 0,
					name : "天津"
				}, {
					id : 3,
					pId : 0,
					name : "上海"
				}, {
					id : 6,
					pId : 0,
					name : "重庆"
				}, {
					id : 4,
					pId : 0,
					name : "河北省",
					//禁用节点选择
					chkDisabled : true,
					open : true
				}, {
					id : 41,
					pId : 4,
					name : "石家庄"
				}, {
					id : 42,
					pId : 4,
					name : "保定"
				}, {
					id : 43,
					pId : 4,
					name : "邯郸"
				}, {
					id : 44,
					pId : 4,
					name : "承德"
				}, {
					id : 5,
					pId : 0,
					name : "广东省",
					open : true
				}, {
					id : 51,
					pId : 5,
					name : "广州"
				}, {
					id : 52,
					pId : 5,
					name : "深圳"
				}, {
					id : 53,
					pId : 5,
					name : "东莞"
				}, {
					id : 54,
					pId : 5,
					name : "佛山"
				} ]
			}
		});
		//使用 checked=true 属性设置选中的值 存在多个checked=true的node时，默认选中第一个checked=true的node；
		var s2z3 = $('select[name=radio3]').select2ztree({
			textField : 'name',
			titleField : 'name',
			ztree : {
				setting : $.extend(true, {
					treeId : 999
				}, setting),
				zNodes : [ {
					id : 6,
					pId : 0,
					name : "福建省",
					open : true
				}, {
					id : 61,
					pId : 6,
					name : "福州"
				}, {
					id : 62,
					pId : 6,
					name : "厦门"
				}, {
					id : 63,
					pId : 6,
					name : "泉州"
				}, {
					id : 64,
					pId : 6,
					name : "三明"
				} ]
			}
		});

		function showSelected(name) {
			console.dir($('textarea[name='+name+']').val($('select[name='+name+']').select2ztree('val')));
		}
		
		$('#btn_destroy').on('click', function(){
			if($(this).data('destroy')=='1'){
			  $(this).text('创建单选树形下拉框2');
				$(this).data('destroy', '0');
				s2z3.select2ztree('destroy');
			}
			else {
			  $(this).text('销毁单选树形下拉框2');
			  $(this).data('destroy', '1');
				s2z3.select2ztree({
					textField : 'name',
					titleField : 'name',
					ztree : {
						setting : $.extend(true, {
							treeId : 999
						}, setting),
						zNodes : [ {
							id : 6,
							pId : 0,
							name : "福建省",
							open : true
						}, {
							id : 61,
							pId : 6,
							name : "福州"
						}, {
							id : 62,
							pId : 6,
							name : "厦门"
						}, {
							id : 63,
							pId : 6,
							name : "泉州"
						}, {
							id : 64,
							pId : 6,
							name : "三明"
						} ]
					}
				});
			}
		});
		
	</script>
</body>
</html>